<template>
  <div class="address-add" @click="showNewAddressDialog">
    <el-card>
      <el-icon>
        <Plus />
      </el-icon>
      <p>添加新地址</p>
    </el-card>
  </div>
  <el-dialog v-model="showNewAddress" title="新增地址">
    <el-form>
      <el-form-item label="姓名">
        <el-input v-model="address.receiveName" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="address.receivePhone" />
      </el-form-item>
      <el-form-item label="地址">
        <el-cascader v-model="selectedRegion" :options="regionData" :props="customProps" filterable
          @change="handleChange" style="width: 100%;"></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="address.street" type="textarea" placeholder="详细地址，如街道、门牌号、小区、楼栋号、单元室等" />
      </el-form-item>
      <el-form-item label="邮政编码" style="width: 400px;">
        <el-input v-model="address.postalCode" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer"></span>
      <el-button @click="showNewAddress = false">取消</el-button>
      <el-button type="primary" @click="submitAddress">确定</el-button>
    </template>
  </el-dialog>

</template>

<script setup>
import { ref } from 'vue';
import regionData from '@/data/regionData.json';
import { Plus } from '@element-plus/icons-vue';
import { addAddressAPI } from '@/apis/address';

const showNewAddress = ref(false);
const address = ref({
  receiveName: "",
  receivePhone: "",
  province: "",
  provinceCode: "",
  city: "",
  cityCode: "",
  area: "",
  areaCode: "",
  street: "",
});

const selectedRegion = ref([]);
const customProps = {
  checkStrictly: true,
  expandTrigger: 'hover',
  value: 'code',
  label: 'name',
  children: 'children',
};

// 新增地址
const addAddress = async () => {
  // 判断地址信息是否合法
  if (!address.value.receiveName || !address.value.receivePhone || !address.value.province || !address.value.city || !address.value.area || !address.value.street) {
    return ElMessage.error('请填写完整地址信息');
  }

  // 新增地址
  await addAddressAPI(address.value).then(res => {
    console.log(res);
    if (res.success === true) {
      ElMessage.success(res.message)
      // 清空地址信息
      address.value = {
        receiveName: "",
        receivePhone: "",
        province: "",
        provinceCode: "",
        city: "",
        cityCode: "",
        area: "",
        areaCode: "",
        street: "",
      };
      selectedRegion.value = [];
    } else {
      ElMessage.error(res.message)
    }

  });
};

// 提交地址
const submitAddress = () => {
  addAddress();
  showNewAddress.value = false;
  // 刷新页面
  window.location.reload();
};



function findRegionItem(code, data = regionData, level = 0) {
  if (level === 0) return data.find(item => item.code === code);
  for (const item of data) {
    if (item.children) {
      const found = findRegionItem(code, item.children, level - 1);
      if (found) return found;
    }
  }
  return null;
}

function handleChange() {
  const codes = selectedRegion.value;

  if (codes.length >= 1) {
    const province = findRegionItem(codes[0]);
    if (province) {
      address.value.province = province.name;
      address.value.provinceCode = province.code;
    }
  }
  if (codes.length >= 2) {
    const city = findRegionItem(codes[1], regionData.find(r => r.code === codes[0])?.children);
    if (city) {
      address.value.city = city.name;
      address.value.cityCode = city.code;
    }
  }
  if (codes.length === 3) {
    const area = findRegionItem(codes[2], regionData.find(r => r.code === codes[0])?.children.find(c => c.code === codes[1])?.children);
    if (area) {
      address.value.area = area.name;
      address.value.areaCode = area.code;
    }
  }
}

const showNewAddressDialog = () => {
  showNewAddress.value = true;
};


</script>



<style scoped lang="scss">
.address-add {
  width: 320px;
  background: #f7f7f7;
  border-radius: 4px;
  padding: 20px;
  cursor: pointer;

  .el-card {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #827e0e;
    height: 160px;
    .el-icon {
      margin-left: 20px;
      font-size: 24px;
    }

    p {
      margin-top: 10px;
    }

    &:hover {
      background: #f0f0f0;
      color: #000;
    }

  }

}
</style>